<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
	import { ref } from 'vue'
	import { getMedicalOrderLogistics } from '@/apis/order'
	import { ExpressData } from '@/types/order.d.ts'

	// 搞得地图的模块导入
	import { onMounted, onUnmounted } from 'vue'
	import AMapLoader from '@amap/amap-jsapi-loader'

	// #ifdef H5
	// 导图汽车图片
	import carImg from '@/static/images/car.png'
	import startImg from '@/static/images/start.png'
	import endImg from '@/static/images/end.png'
	// #endif

	const props = defineProps<{ id: string }>()
	const logisticData = ref({} as ExpressData)
	const getData = async () => {
		const res = await getMedicalOrderLogistics(props.id)
		// console.log(res)
		logisticData.value = res
	}

	// 初始化地图

	// #ifdef H5
	let map = null

	const initMap = () => {
		window._AMapSecurityConfig = {
			securityJsCode: '83d1e6dab186712f300632467f5cad75',
		}
		AMapLoader.load({
			key: '384a9da443efe393a734a0b2a7f72c51', // 申请好的Web端开发者Key，首次调用 load 时必填
			version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
		})
			.then((AMap) => {
				// 路径
				const points = logisticData.value.logisticsInfo
				// 当前位置
				const { latitude, longitude } = logisticData.value.currentLocationInfo

				// 获取 起点 终点 途经点
				const startPoint = points.shift()
				const endPoint = points.pop()
				// 弹出了起点和终点，剩下的就是 途经点
				// 需要转换格式，对象-》数组
				const waypoints = points.map((v) => {
					return [v.longitude, v.latitude]
				})
				map = new AMap.Map('map', {
					// 设置地图容器id
					viewMode: '3D', // 是否为3D地图模式
					zoom: 11, // 初始化地图级别
					center: [longitude, latitude], // 初始化地图中心点位置
				})

				AMap.plugin('AMap.Driving', () => {
					const driving = new AMap.Driving({
						map: map, // 指定轨迹显示地图实例
						showTraffic: false, // 关闭交通状态
						hideMarkers: true,
					})
					// 开始位置坐标
					const startLngLat = [startPoint?.longitude, startPoint?.latitude]
					// 结束位置坐标
					const endLngLat = [endPoint?.longitude, endPoint?.latitude]

					driving.search(
						startLngLat,
						endLngLat,
						{
							waypoints, // 途经点
						},
						function (status: string, result: object) {
							// 未出错时，result即是对应的路线规划方案
						}
					)
				})

				// 绘制 车的图片
				const carMarker = new AMap.Marker({
					icon: carImg,
					position: [longitude, latitude],
					anchor: 'center', // 设置基于坐标点显示的位置
				})
				map.add(carMarker)
				// 3s后，定位到货车，放大地图
				setTimeout(() => {
					// 适配视图
					map.setFitView([carMarker])
					// 缩放
					map.setZoom(10)
				}, 3000)

				// 起点 终点
				const startMarker = new AMap.Marker({
					icon: startImg,
					position: [startPoint?.longitude, startPoint?.latitude],
				})
				map.add(startMarker)

				const endMarker = new AMap.Marker({
					icon: endImg,
					position: [endPoint?.longitude, endPoint?.latitude],
				})
				map.add(endMarker)
			})
			.catch((e) => {
				console.log(e)
			})
	}
	// #endif

	// dom 元素解析完毕之后执行的钩子
	onMounted(async () => {
		await getData()
		// #ifdef H5

		// 调用时机 必须比接口数据获取要晚
		initMap()
		// #endif
	})

	// 移除的钩子
	// #ifdef H5
	onUnmounted(() => {
		map?.destroy()
	})
	// #endif
</script>

<template>
	<view class="timeline-page">
		<!-- 加载地图 -->
		<view id="map" class="uni-map"></view>
		<!-- <map style="width: 100%; height: 4700px" latitude="31.93182" longitude="118.633415"> </map> -->
		<!--  end -->
		<cover-view class="timeline-meta">
			<cover-view class="status">订单派送中</cover-view>
			<cover-view class="extra"> 预计明天送达 申通快递 7511266366963366 </cover-view>
		</cover-view>
		<view class="timeline-detail">
			<view class="title">物流详情</view>
			<view class="timeline">
				<!-- 收货地址 无需调整  -->
				<view class="line">
					<view class="badge text">收</view>
					<view class="content"> 收货地址：广东省广州市大华区明离路科技园880号 </view>
				</view>
				<view v-for="item in logisticData.list" :key="item.id" class="line">
					<!-- 因为接口问题 最高的状态为 3，为了页面效果 3 及以上 显示 图标 -->
					<view v-if="item.status >= 3" class="badge icon">
						<uni-icons
							custom-prefix="iconfont"
							color="#2cb5a5"
							size="15"
							type="icon-truck"
						/>
					</view>
					<view v-if="item.status < 3" class="badge dot"> </view>
					<view class="label">{{ item.statusValue }}</view>
					<view class="content">
						{{ item.content }}
					</view>
					<view class="time">{{ item.createTime }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
